<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" th:href="@{/public/lib/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/community/community.css}">
    <script th:src="@{/public/lib/jquery/jquery-3.7.1.min.js}"></script>
    <script th:src="@{/public/lib/layui/layui.js}"></script>
    <script th:src="@{/community/community.js}"></script>

    <link rel="stylesheet" th:href="@{/community/aieditor/style.css}">

    <script type="module">
        import {AiEditor} from './aieditor/index.js'
        // import {AiEditor} from 'C:\Users\27846\Desktop\lession1226登录页面\lession1226-1\src\main\resources\static\aieditor\index.js'

        new AiEditor({
            element: "#aiEditor",
            placeholder: "点击输入您的分享内容...",
            content: '',
            onMentionQuery: (query) => {
                return [
                    'Michael Yang', 'Jean Zhou', 'Tom Cruise', 'Madonna', 'Jerry Hall', 'Joan Collins', 'Winona Ryder'
                    , 'Christina Applegate', 'Alyssa Milano', 'Molly Ringwald', 'Ally Sheedy', 'Debbie Harry', 'Olivia Newton-John'
                    , 'Elton John', 'Michael J. Fox', 'Axl Rose', 'Emilio Estevez', 'Ralph Macchio', 'Rob Lowe', 'Jennifer Grey'
                    , 'Mickey Rourke', 'John Cusack', 'Matthew Broderick', 'Justine Bateman', 'Lisa Bonet',
                ].filter(item => item.toLowerCase().startsWith(query.toLowerCase())).slice(0, 5)
            },
            contentRetention:false,
            ai: {
                models: {
                    spark: {
                        appId: "57ba8c3a",
                        apiKey: "a213b7bff8d4efbf38457795019b5306",
                        apiSecret: "Y2RjOTBlNGNjOGNmYjc5Y2M5OTliZGYz",
                    }
                },
            },
        })
    </script>

    <script>
        let isDark = false;

        function dark() {
            if (!isDark) {
                document.body.style.background = "#1a1b1e"
                document.querySelector("#title").style.color = "#eee"
                document.querySelector("#aiEditor").classList.remove("aie-theme-light");
                document.querySelector("#aiEditor").classList.add("aie-theme-dark");
            } else {
                document.body.style.background = ""
                document.querySelector("#title").style.color = ""
                document.querySelector("#aiEditor").classList.remove("aie-theme-dark");
                document.querySelector("#aiEditor").classList.add("aie-theme-light");
            }
            isDark = !isDark;
        }

        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?9fd447a0f9e62a84d1b752a2cacb2c6b";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>


</head>
<body>

<div style="padding: 10px 20px;font-size: 30px" id="title">

    <button onclick="dark()">切换主题</button>
</div>
<div id="aiEditor" style="height: 550px;  margin: 20px" ></div>
</body>
</html>